<template>
  <div class="Nationalorders">
    <div class="filter_container">
      <el-form :inline="true" :model="Nationalform" class="demo-form-inline">
        <el-form-item label="城市">
          <el-select v-model="deptIds" size="small" placeholder="请选择城市" multiple @visible-change='citydataList' @change="getdeptIdsIds"
            ref='deptNameRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in cityList" :key="item.id" size="small" :label="item.deptName" :value="{label:item.deptName,value:item.id}">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="时间类型">

        </el-form-item> -->
        <el-form-item label="选择日期">
          <el-select v-model="Nationalform.timeType" size="small" clearable style='width:100px;margin-right:10px;' ref='timeTypeRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in TimesList" :key="item.value" :label="item.value" :value="item.label">
            </el-option>
          </el-select>
          <el-date-picker size="small" v-model="Launchdate" type="daterange" range-separator="至" start-placeholder="开始日期"
            :clearable='false' end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="small" icon="el-icon-search" @click="handleFilterNational(Nationalform,Launchdate)">查询</el-button>
          <el-button type="success" plain size="small" icon="el-icon-download" @click="handleExportNational(Nationalform,Launchdate)"  onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="Nationalorders-list">
      <el-table :data="NationalordersList" border style="width: 100%">
        <!-- <el-table-column label="全国订单数据" align='center'> -->
        <el-table-column label="后台单号" width="180" prop="xmbzNo" fixed :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="订单状态" width="100" prop="status" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="配送地址" width="300" prop="receiverAddress" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="配送日期" width="120" prop="deliveryDate" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="配送时间" width="180" :show-overflow-tooltip="true">
          <template slot-scope="scope"> {{scope.row.deliveryStartTime}}~{{scope.row.deliveryEndTime}}</template>
        </el-table-column>
        <el-table-column label="商品档案编码" width="240" prop="skuId" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="蛋糕名称" width="300" prop="goodsName" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="规格" width="200" prop="goodsSpecs" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="数量" width="120" prop="num" :show-overflow-tooltip="true">
        </el-table-column>
           <el-table-column label="商品类型" width="120" prop="categoryName" :show-overflow-tooltip="true">
        </el-table-column>
        <!-- <el-table-column label="下单员" width="120" prop="orderer">
        </el-table-column> -->
        <el-table-column label="配送员" width="120" prop="delivery" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="财务需求" width="200" prop='merchantName' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="配送需求" width="120" porp='deliveryRemark' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="生产需求" width="120" prop='generateRemark' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="团购码" width="200" prop='platformOrderId' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="渠道" width="200" prop='channelName' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="祝福语" width="300" prop='blessings' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="客户备注" width="380" prop='consumerRemark' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="总仓" width="80" prop="mainWarehouse" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="分仓" width="80" prop='branchWarehouse' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="签收时间" width="180" prop='receivedTime' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="下单时间" width="180" prop='orderTime' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="操作人" width="120" prop='operator' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="城市" width="120" prop='deptName' fixed='right' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="订单总价" width="120" prop='originalPrice' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="付款金额" width="120" prop='totalPrice' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="配送费" width="120" prop='postPrice' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="优惠金额" width="120" prop='discountPrice' :show-overflow-tooltip="true">
        </el-table-column>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
  import {
    deptdepts
  } from "@/api/shop";
  import {
    getExcelShowData
  } from "@/api/statistics"
  export default {
    data() {
      return {
        deptIds: [],
        Nationalform: {
          excelType: 'ORDER', //订单统计
          deptIds: [],
          // endTime: '',
          // startTime: '',
          startTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD"),
          endTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD"),
          timeType: 2,
        },
        cityList: [], //城市
        TimesList: [{
          value: '下单时间',
          label: 1
        }, {
          value: '配送时间',
          label: 2
        }],
        NationalordersList: [ //全国订单数据],
        ],
        deptIdsIdslist: [],
        Launchdate: [
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
        ],
      }
    },
    mounted() {
      this.getOrderList();
      window.addEventListener("keydown", this.keyupEnter);
    },
    methods: {
      // 选择框回车失焦
      selectBlur(e) {
        if (e.keyCode == 13) {
          this.$refs.deptNameRef.blur();
          this.$refs.timeTypeRef.blur();
          e.returnValue = false;
        }
      },
      // 回车事件
      keyupEnter() {
        if (window.event.keyCode == 13) {
          this.handleFilterNational(this.Nationalform, this.Launchdate); // 查询事件
        }
      },
      //如果页面有keep-alive缓存功能，这个函数会触发
      activated() {
        window.addEventListener("keydown", this.keyupEnter);
      },
      deactivated() {
        window.removeEventListener("keydown", this.keyupEnter);
      },

      citydataList() {
        deptdepts("").then(response => {
          this.cityList = response.data.data;
        });
      },
      getdeptIdsIds(data) {
        this.deptIdsIdslist = data;
      },
      // headlegettimeType(item) {
      //   this.gettimeType = item;
      // },
      getOrderList() {
        // 订单列表分页
        getExcelShowData(this.Nationalform).then(response => {
          this.NationalordersList = response.data.data;
        });
      },
      handleFilterNational(Nationalform, times) { //查询
        // if (this.Nationalform.startTime) {
        //   this.Nationalform.startTime = this.dayjs(
        //       this.Nationalform.startTime
        //     )
        //     .format("YYYY-MM-DD")
        //     .toString();
        // } else {
        //   this.Nationalform.startTime = ''
        // }
        // if (this.Nationalform.endTime) {
        //   this.Nationalform.endTime = this.dayjs(
        //       this.Nationalform.endTime
        //     )
        //     .format("YYYY-MM-DD")
        //     .toString();
        // } else {
        //   this.Nationalform.endTime = ''
        // }
        var fifdeptIds = [];
        this.deptIdsIdslist.map(item => {
          fifdeptIds.push(item.value)
        })
        Nationalform.deptIds = fifdeptIds.join(',');
        // Nationalform.timeType = this.gettimeType
        if (times) {
          this.Nationalform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Nationalform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.Nationalform.startTime);
        var time2 = Date.parse(this.Nationalform.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 30) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          this.getOrderList();
        }

      },
      handleExportNational(Nationalform, times) { //导出
        let {
          startTime = "", endTime = "", deptIds = '',
        } = this.Nationalform
        // startTime = this.dayjs(startTime)
        //   .format("YYYY-MM-DD")
        //   .toString();
        // endTime = this.dayjs(endTime)
        //   .format("YYYY-MM-DD")
        //   .toString();
        // var time1 = Date.parse(startTime);
        // var time2 = Date.parse(endTime);
        //讲两个时间相减，求出相隔的天数
        // var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        var fifdeptIds = [];
        this.deptIdsIdslist.map(item => {
          fifdeptIds.push(item.value)
        })
        Nationalform.deptIds = fifdeptIds.join(',');
        // Nationalform.timeType = this.gettimeType;
        // if (this.timeType == "") {
        //   this.$message({
        //     showClose: true,
        //     message: "请选择订单统计导出的时间类型",
        //     type: "warning"
        //   });
        // } else if (this.Nationalform.startTime == "") {
        //   this.$message({
        //     showClose: true,
        //     message: "请选择订单统计开始时间",
        //     type: "warning"
        //   });
        // } else if (this.Nationalform.endTime == "") {
        //   this.$message({
        //     showClose: true,
        //     message: "请选择订单统计结束时间",
        //     type: "warning"
        //   });
        // } else if (endTime < startTime) {
        //   this.$message({
        //     showClose: true,
        //     message: "结束时间要大于开始时间 ",
        //     type: "warning"
        //   });
        // } else if (dayCount > 31) {
        //   this.$message({
        //     showClose: true,
        //     message: "时间间隔不可超过31天",
        //     type: "warning"
        //   });
        // } else {

        // }
        if (times) {
          this.Nationalform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Nationalform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.Nationalform.startTime);
        var time2 = Date.parse(this.Nationalform.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 30) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          // const {
          //   user
          // } = this.$store.state
          var user = JSON.parse(localStorage.getItem('saber-userInfo'));
          window.open(
            `/api/xmbz-statistics/orderStatistics/downLoadOrderExcel?excelType=ORDER&startTime=${this.Nationalform.startTime}&endTime=${this.Nationalform.endTime}&deptIds=${Nationalform.deptIds}&timeType=${Nationalform.timeType}&blade-auth=bearer ${user['content'].accessToken}`

          );
          console.log(
            `/api/xmbz-statistics/orderStatistics/downLoadOrderExcel?excelType=ORDER&startTime=${this.Nationalform.startTime}&endTime=${this.Nationalform.endTime}&deptIds=${Nationalform.deptIds}&timeType=${Nationalform.timeType}&blade-auth=bearer ${user['content'].accessToken}`
          )
        }
      }
    }

  }
</script>

<style lang='scss'>
  .Nationalorders {
    padding-top: 20px;
    border-top: 1px solid #ccc;

    .filter_container {
      display: flex;

      .el-form-item {
        margin-bottom: 22px !important;
      }
    }
  }
</style>
